<template>
  <view class="with-draw-layout">
    <my-header title="提现记录"></my-header>
    <my-content class="content">
      <scroll-view
        class="scroll"
				refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="balance_box">
          <view class="balance_item item-bg" v-for="item in balanceData" :key="item.id">
            <view class="top">
              <view class="remark" v-if="item.status == 1">提现中</view>
              <view class="remark" v-if="item.status == 2">提现成功</view>
              <view class="remark" v-if="item.status == 3">提现失败</view>
              <view class="amount">{{ item.amount }}</view>
            </view>
            <view class="bottom">
              <view class="time">{{ item.created_at }}</view>
              <view class="aftet_amount">余额：{{ item.after_amount }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      mode: '',
      balanceData: [],
      tabData: [
        { id: '', title: '全部' },
        { id: 1, title: '收入' },
        { id: 2, title: '支出' },
      ],
      last_page: 0,
      page: 1,
      refreshStatus: false,
    }
  },
  onLoad() {},
  onShow() {
    this.refresh()
  },

  methods: {
    changeTab(id) {
      if (this.mode != id) {
        this.mode = id
        this.page = 1
        this.getBalance(2)
      }
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getBalance(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getBalance(2)
    },
    getBalance(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userWithdraws
        .index({ page: this.page })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            if (type == 1) {
              this.balanceData = this.balanceData.concat(res.data.data)
            } else {
              this.balanceData = res.data.data
            }
            this.last_page = res.data.last_page
            this.refreshStatus = false
            if (this.last_page == this.page) {
              this.show('没有更多数据了')
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.with-draw-layout {
  height: 100vh;
  background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100% 100%;
}
.content {
  height: 100vh;
  .tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    font-size: 30rpx;
    width: 100%;
    z-index: 100;
    .tab_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .tab_border {
        width: 50rpx;
        height: 5rpx;
      }
      &.active {
        .tab_border {
          background-color: #a361f6;
        }
        .tab_title {
          font-weight: bold;
          color: #a361f6;
        }
      }
    }
  }

  .scroll {
		height: 100%;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .balance_box {
    display: flex;
    flex-direction: column;
		height: 100%;
    /* height: calc(100vh - 150rpx); */
    .balance_item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 30rpx;
      margin: 10rpx 20rpx;
      box-sizing: border-box;
			color: white;
      padding: 10rpx;
      .top,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          color: #808080;
          font-size: 24rpx;
					margin-bottom: 20rpx;
        }
        .amount {
          font-size: 36rpx;
          display: flex;
          align-items: center;
          &.add {
            color: #a361f6;
          }
          &.remove {
            color: red;
          }
        }
        .aftet_amount {
          color: #808080;
        }
      }
    }
  }
}
</style>
